<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/knockout-3.3.0.js"></script>
</head>
<body>
	<p>
		Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" />
	</p>
	<div data-bind="visible: wantsSpam">
		Preferred flavors of spam:
		<div>
			<input type="checkbox" value="cherry"
				data-bind="checked: spamFlavors" /> Cherry
		</div>
		<div>
			<input type="checkbox" value="almond"
				data-bind="checked: spamFlavors" /> Almond
		</div>
		<div>
			<input type="checkbox" value="msg" data-bind="checked: spamFlavors" />
			Monosodium Glutamate
		</div>
	</div>


	<script type="text/javascript">
		var viewModel = {
			wantsSpam : ko.observable(true),
			spamFlavors : ko.observableArray([ "cherry", "almond" ])
		// Initially checks the Cherry and Almond checkboxes
		};

		// ... then later ...
/* 		viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
 */
		ko.applyBindings(viewModel);
	</script>

</body>
</html>